<template>
  <div v-if="list != undefined" style="padding: 20px">
    <el-card :list="dataForm" class="box-card" shadow="hover">
      <div class="constant">
        <div class="list">
          <div class="list-cell">
            <div class="cell">
              <div class="title">开户行: {{ list.bankName }}</div>
              <div class="title">账号: {{ list.bankNo }}</div>
              <div class="title">户名: {{ list.bankNoName }}</div>
              <div class="title">课程验证(签到)时长/分钟: {{ list.verifyInterval }}</div>
              <div class="title">课程过期天数/天 ：{{ list.expireDay }}</div>
              <div class="line"/>

              <div class="title">
              <el-button type="primary" size="mini" @click="handleUpdate()">设置</el-button></div>
              <div class="line"/>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 基本设置 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="基本设置">
      <el-form
        ref="dataForm"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="100px"
        style="width: 80%; margin-left:50px;"
      >
        <el-form-item label="开户行" prop="bankName">
          <el-input v-model="dataForm.bankName" placeholder="输入开户行"/>
        </el-form-item>
        <el-form-item label="账号" prop="bankNo">
          <el-input v-model="dataForm.bankNo" placeholder="输入账号"/>
        </el-form-item>
        <el-form-item label="户名" prop="bankNoName">
          <el-input v-model="dataForm.bankNoName" placeholder="输入户名"/>
        </el-form-item>
        <el-form-item label="课程验证(签到)时长" prop="verifyInterval">
          <el-input v-model="dataForm.verifyInterval">
          <template slot="append">分钟</template>
          </el-input>
        </el-form-item>
        <el-form-item label="课程过期天数" prop="verifyInterval">
          <el-input v-model="dataForm.expireDay">
          <template slot="append">天</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
        <el-button size="mini" type="primary" @click="updateData">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style>
  .constant{
    width: 100%;
  }
  .img{
    margin-top: 20px;
    width: 150px;
    height: 150px;
  }
  .img img{
    width: 100%;
    height: 100%;
  }
  .list{
    width: 100%;
  }
  .list-cell{
    width: 100%;
    line-height: 50px;
  }
  .cell{
    width: 100%;
    /*display: inline-flex;*/
  }
  .set{
    color: deepskyblue;
  }
  .line{
    width: 100%;
    border-bottom: 2px solid #f6f6f6;
  }
  .erweima{
    width: 100%;
    border-bottom: 2px solid #f6f6f6;
  }

</style>

<script>
import { readOrganization, updateOrganization } from '@/api/organization'
import { uploadPath } from '@/api/storage'
import { getToken } from '@/utils/auth'
import Pagination from '@/components/Pagination'
import TagsView from '../layout/components/TagsView' // Secondary package based on el-pagination

export default {
  name: 'StoreSet',
  components: { TagsView, Pagination },
  data() {
    return {
      uploadPath,
      list: undefined,
      listLoading: true,
      dialogFormVisible: false,
      downloadLoading: false,
      dataForm: {
        id: undefined,
        bankName: undefined,
        bankNoName: undefined,
        bankNo: undefined,
        verifyInterval: undefined,
        expireDay: 30,
        createDate: undefined
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    uploadPicUrl: function(response) {
      this.dataForm.picUrl = response.data.url
    },

    getList() {
      this.listLoading = true
      readOrganization()
        .then(response => {
          this.list = response.data.data
          this.listLoading = false
        })
        .catch(() => {
          this.list = undefined
          this.listLoading = false
        })
    },
    handleUpdate() {
      this.dataForm = this.list
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          updateOrganization(this.dataForm)
            .then(() => {
              // for (const v of this.list) {
              //   if (v.id === this.dataForm.id) {
              //     const index = this.list.indexOf(v)
              //     this.list.splice(index, 1, this.dataForm)
              //     break
              //   }
              // }
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '更新成功'
              })
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.message
              })
            })
        }
      })
    }

  }
}
</script>
